<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API</title>
    <link rel="shortcut icon" href="../../assets/imgs/name.svg" type="image/x-icon">

    <!-- 1.重置样式 -->
    <link rel="stylesheet" href="../../assets/css/normalize.css">

    <!-- 2.公共样式 -->
    <link rel="stylesheet" href="../../assets/css/common.css">

    <!-- 3.当前样式 -->
    <link rel="stylesheet" href="./api.css">
    <!-- 4.引入外用样式 -->
    <link rel="stylesheet" href="../login/login.css">

</head>

<body>
    <!-- 
        布局思想: 从整体到局部 先建框后填内容
    -->

    <!-- 头部 -->
    <header class="head clearfix">
        <h1 class="fl">
            <a href="#"><img src="../../assets/imgs/new-logo-white2.png" alt=""></a>
        </h1>

        <nav class="head-nav">
            <ul class="clearfix">
                <li><a href="../home/home.html">首页</a></li>
                <li class="active"><a href="#">API</a></li>
                <!-- <li><a href="#">云服务</a></li> -->
                <li><a href="../case/case.html">案例</a></li>
                <!-- <li><a href="#">开发者</a></li> -->
            </ul>
        </nav>

        <div class="fr head-btn">
            <a href="../login/login.html">登录</a>
            <a class="head-regbtn" href="../register/register.html">注册有礼</a>
        </div>

    </header>

    <!-- API分类搜索部分 -->
    <div class="apicatgray container">
        <h2>API分类</h2>
        <div class="clearfix api-link">
            <!-- <a href="#" class="fl api-nav active">全部</a>
            <a class="fl api-nav " href="#">生活服务</a>
            <a class="fl api-nav " href="#">金融科技</a>
            <a class="fl api-nav " href="#">交通地理</a>
            <a class="fl api-nav " href="#">充值缴费</a>
            <a class="fl api-nav " href="#">数据智能</a>
            <a class="fl api-nav " href="#">企业工商</a>
            <a class="fl api-nav " href="#">应用开发</a>
            <a class="fl api-nav " href="#">电子商务</a>
            <a class="fl api-nav " href="#">吃喝玩乐</a>
            <a class="fl api-nav " href="#">文娱视频</a>
            <a class="fl api-nav " href="#">
                <strong>免费接口大全</strong>
            </a>
            <a class="fl api-nav " href="#">短信</a>
            <a class="fl api-nav " href="#">汽车</a>
            <a class="fl api-nav " href="#">核验</a>
            <a class="fl api-nav " href="#">
                <strong>最新发布</strong>
            </a>
            <a class="fl api-nav " href="">
                <strong>API私有化部署</strong>
            </a> -->
        </div>
        <div class="clearfix api-box">
            <strong class="fl" id="apiTips">全部</strong>
            <p class="fl api-search">
                <input class="api-search-text fl" type="text" placeholder="身份证号">
                <button class="api-btn fl"></button>
            </p>
        </div>
    </div>

    <!-- API主体部分 -->
    <div class="container main-box">
        <ul class="api-list clearfix">
            <!-- <li>
                <a href="#">
                    <img src="../../assets/imgs/API_01.jpg" alt="">
                    <p>2021出行防疫政策指南</p>
                    <p class="green">免费</p>
                </a>
                <button class="btns">申请数据</button>
            </li>
            <li>
                <span>企业专用</span>
                <a href="#">
                    <img src="../../assets/imgs/API_01.jpg" alt="">
                    <p>2021出行防疫政策指南</p>
                    <p class="green">免费</p>
                </a>
                <button class="btns">申请数据</button>
            </li>
            <li>
                <span>企业专用</span>
                <a href="#">
                    <img src="../../assets/imgs/API_01.jpg" alt="">
                    <p>2021出行防疫政策指南</p>
                    <p class="red">免费</p>
                </a>
                <button class="btns">申请数据</button>
            </li>
            <li>
                <a href="#">
                    <img src="../../assets/imgs/API_01.jpg" alt="">
                    <p>2021出行防疫政策指南</p>
                    <p class="red">免费</p>
                </a>
                <button class="btns">申请数据</button>
            </li>
            <li>
                <a href="#">
                    <img src="../../assets/imgs/API_01.jpg" alt="">
                    <p>2021出行防疫政策指南</p>
                    <p class="green">免费</p>
                </a>
                <button class="btns">申请数据</button>
            </li>
            <li>
                <a href="#">
                    <img src="../../assets/imgs/API_01.jpg" alt="">
                    <p>2021出行防疫政策指南</p>
                    <p class="red">免费</p>
                </a>
                <button class="btns">申请数据</button>
            </li> -->
        </ul>
    </div>

    <!-- 分页效果 -->
    <div class="page container">
        <ul class="clearfix">
            <li class="fl act">1</li>
            <li class="fl">2</li>
            <li class="fl">3</li>
            <li class="fl">4</li>
            <li class="fl">5</li>
            <li class="fl">6</li>
            <li class="fl">7</li>
            <li class="fl">8</li>
            <span>.....</span>
        </ul>
        <button class="pageBtn">下一页</button>
    </div>

    <!-- 尾部 -->
    <footer class="footer">
        <div class="container">
            <!-- 顶部 -->
            <div class="footer-top clearfix">
                <dl class="footer-item fl">
                    <dt class="item-title">联系与支持</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" class="item-link" href="#" target="_blank">常见问题
                        </a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <dl class="footer-item fl">
                    <dt class="item-title">关于源码</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" class="item-link" href="#" target="_blank">常见问题
                        </a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <dl class="footer-item fl">
                    <dt class="item-title">快速入口</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" class="item-link" href="#" target="_blank">常见问题
                        </a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <dl class="footer-item fl">
                    <dt class="item-title">产品服务</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" class="item-link" href="#" target="_blank">常见问题
                        </a">
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <dl class="footer-item fl">
                    <dt class="item-title">解决方案</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">常见问题</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <!-- 右边的微信图标 -->
                <div class="wechat fr">
                    <p class="title">微信公众号</p>
                    <p class="name">源码时代</p>
                    <img src="../../assets/imgs//wechat-white.png" alt="">
                </div>
            </div>
            <!-- 底部 -->
            <p class="footer-btm clearfix">
                <a href="#" class="fl mr10">
                    <img src="../../assets/imgs//bei2.png" alt="">
                </a>
                <a href="#" class="fl mr10">
                    <img src="../../assets/imgs//bei1.png" alt=""> </a>
                <span class="fl mr10">增值电信业务经营许可证：蜀B2-20180596</span>
                <a href="#" class="fl mr10">蜀ICP备15006450号-3</a>
                <a href="#" class="fl mr10">营业执照</a>
                <span class="fr">源码大数据股份有限公司©版权所有</span>

            </p>
        </div>
    </footer>

    <!-- 弹出框登录页面 -->
    <div class="other content">
        <!-- 输入框 -->
        <div class="box">
            <div class="account">
                <a href="">
                    <img src="../../assets/imgs/loginlogo.png" alt="">
                </a>
                <!-- 登录方式/注册公用样式-->
                <div class="login-method">
                    <a href="javascript:" class="active" id="num">账号登录<span></span></a>
                    <a href="javascript:" id="sacn-code">扫码登录<span></span></a>
                </div>

                <div class="one">
                    <!-- 账号输入 -->
                    <div class="inputs clearfix" id="to-login">
                        <div class="bank">
                            <span></span>
                            <input type="text" name="" id="bankInp" placeholder="用户名/手机号/邮箱">
                            <img id="bankImg" src="../../assets/imgs/clearInput.png" alt="">
                        </div>
                        <!-- 判断信息是否正确时提示信息 -->
                        <div class="judge">
                            <p class="userbox">请正确输入用户名</p>
                        </div>

                        <div class="pwd">
                            <span></span>
                            <input type="password" name="" id="pwdInp" placeholder="密码">
                            <img id="pwdImg" src="../../assets/imgs/clearInput.png" alt="">
                        </div>
                        <!-- 判断信息是否正确时提示信息 -->
                        <div class="judge">
                            <p class="passbox">请正确输入用户密码</p>
                        </div>

                        <!-- 忘记密码 -->
                        <p class="forgotpwd clearfix"><a href="">忘记密码</a></p>
                        <!-- 登录点击 -->
                        <input type="button" value="登录" id="loginBtn" class="login-btn">

                        <!-- 注册账号 -->
                        <p class="have">
                            还没有源码账号，
                            <a href="../register/register.html">立即注册</a>
                            <span></span>
                        </p>
                    </div>
                </div>

                <!-- 扫码登录 -->
                <div class="scan" style="display: none;" id="sweep">
                    <div class="code">
                        <img src="../../assets/imgs/showqrcode.jpg" alt="">
                        <p>微信扫码登录</p>
                        <p>未关注源码科技公众号，请先关注后再登录</p>
                    </div>
                    <!-- 注册账号 -->
                    <p class="have">还没有源码账号，
                        <a href="../register/register.html">立即注册</a>
                        <span></span>
                    </p>

                </div>
            </div>

        </div>
    </div>

    <!-- 当前js -->
    <script src="./api.js"></script>
    <!-- 外用现成js -->
    <script src="../login/login.js"></script>

</body>

</html>